<!-- 详情提示框 -->
<template>
  <div>
    <q-dialog v-model="isShowDetails" persistent style="min-width: 350px;" @mousedown="dialogDrag($event, 1)" @mousemove="dragIcon($event)">
      <q-card style="min-width: 300px;">
        <!-- 对话框的头部 -->
        <q-card-section class="row items-center q-pb-none">
          <div class="text-h6">{{ titleName }}</div>
          <q-space />
          <q-btn icon="close" flat round dense @click="closeDetail" />
        </q-card-section>
          <!-- 对话框的主体-->
        <q-card-section class="q-pt-none">
          <span v-if="detailList.length <= 0" class="text-red">{{ msg }}</span>
          <q-form v-else class="detail-list">
            <ul>
              <li v-for="(itemDetail, index) in detailList" :key="index">
                <span>{{ itemDetail.label }}</span>
                <span v-if="!itemDetail.img">{{ itemDetail.key }}</span>
                <span v-else>
                  <img style="height: 38px;" :src="itemDetail.img" />
                </span>

              </li>

            </ul>
          </q-form>
        </q-card-section>
      </q-card>
    </q-dialog>
  </div>
</template>

<script>
import drag from 'src/components/mixins/drag.js'
export default {
  mixins: [drag],
  props: {
    titleName: {
      type: String,
      default: '详情'
    },
    detailList: {
      type: Array,
      default() {
        return []
      }
    },
    isShowDetail: {
      type: Boolean,
      default: false
    },
    msg: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      isShowDetails: false
    };
  },

  components: {},

  computed: {},
  watch: {
    isShowDetail: {
      immediate: true,
      handler(val) {
        this.isShowDetails = val
      }
    }
  },

  mounted() {},

  methods: {
    closeDetail() {
      this.$emit('closeDetail')
    },
  }
}

</script>
<style lang='scss' scoped>
// 详情对话框样式
.detail-list {
  margin-top: 20px;
  ul {
    li {
      overflow: hidden;
      max-height: 42px;
      line-height: 42px;
      margin-bottom: 5px;
      border-bottom: 1px solid #cccccc;
      >span {
        &:first-child {
          float: left;
          margin-left: 20px;
          position: relative;
          width: 104px;
          border-right: 1px solid #ccc;
        }
        &:last-child {
          float: left;
          margin-left: 20px;
        }
      }
    }
  }
}
</style>
